<script lang="tsx" setup>
import { ref, nextTick, reactive, h } from "vue";
import {
  VxeFormPropTypes,
  VxeFormInstance,
  VxeModalInstance,
  VxeButton
} from "vxe-pc-ui";
import { getSingle,checkTheAgreement} from "@/api/merchant/management";
const emits = defineEmits<{ (e: "reload"): void }>();
const vxeModalRef = ref<VxeModalInstance>();
import { ElMessage } from "element-plus";
const modalOptions = reactive<{
  modalValue: boolean;
  modalTitle: string;
  canSubmit: boolean;
}>({
  modalValue: false,
  modalTitle: "",
  canSubmit: true
});

const showModal = (title: string, canSubmit?: boolean): void => {
  modalOptions.modalTitle = title;
  modalOptions.modalValue = true;
  modalOptions.canSubmit = canSubmit ?? true;
};

interface AddProjectInput {
  averageUserName: string;
  identityNumber: string;
  mobile: string;
  bankCardNumber: string;
  signedOrNotDisplay: string;
  signingTheSourceDisplay: string;
  cooperateNumber: number;
  numberOfTasksCompleted: number;
  comprehensiveScore: number;
}
const formRef = ref<VxeFormInstance>();

const defaultFormData = () => {
  return {
    id: "",
    averageUserName: "",
    identityNumber: "",
    mobile: "",
    bankCardNumber: "",
    signedOrNotDisplay: "",
    signingTheSourceDisplay: "",
    cooperateNumber: 0,
    numberOfTasksCompleted: 0,
    comprehensiveScore: 0
  };
};
const formData = ref<AddProjectInput>(defaultFormData());
const formItems = ref<VxeFormPropTypes.Items>([
  {
    field: "averageUserName",
    title: "姓名",
    span: 24,
    itemRender: {},
    slots: { default: "averageUserName" }
  },
  {
    field: "identityNumber",
    title: "身份证号",
    span: 24,
    itemRender: {
      // name: "$input"
    },
    slots: { default: "identityNumber" }
  },
  {
    field: "mobile",
    title: "手机号",
    span: 24,
    itemRender: {
      // name: "$input"
    },
    slots: { default: "mobile" }
  },
  {
    field: "bankCardNumber",
    title: "银行卡号",
    span: 24,
    itemRender: {
      // name: "$input"
    },
    slots: { default: "bankCardNumber" }
  },
  {
    field: "signedOrNotDisplay",
    title: "签约状态",
    span: 24,
    itemRender: {
      // name: "$input",
      // props: { disabled: true }
    },
    slots: { default: "signedOrNotDisplay" }
  },
  {
    field: "signingTheSourceDisplay",
    title: "签约方式",
    span: 24,
    itemRender: {
      // name: "$input"
    },
    slots: { default: "signingTheSourceDisplay" }
  },
  {
    field: "id",
    title: "协议",
    span: 24,
    slots: {
      default: ({ data }) => {
        return [
          h(VxeButton, {
            style: { width: `24%`,color:`#f00`,border:`0` },
            content: "查看协议",
            async onClick() {
              console.log(data,'data')
              try {
                checkTheAgreement(detail.value.id).then(res => {
                  if (res) {
                    console.log(res,'res')
                    // row.contractPdfUrl = res.data.contractPdfUrl;
                    if (!res.data.contractPdfUrl) {
                      ElMessage.error("查看地址不存在！");
                      return false;
                    }
                    window.open(res.data.contractPdfUrl, "_blank");
                  }
                });
              } catch (e) {}
            }
          })
        ];
      }
    }
  },
  {
    field: "cooperateNumber",
    title: "合作次数",
    span: 24,
    itemRender: {
      // name: "$input"
    },
    slots: { default: "cooperateNumber" }
  },
  {
    field: "numberOfTasksCompleted",
    title: "完成任务次数",
    span: 24,
    itemRender: {
      // name: "$input"
    },
    slots: { default: "numberOfTasksCompleted" }
  },
  {
    field: "comprehensiveScore",
    title: "综合评分",
    span: 24,
    itemRender: {
      // name: "$input"
    },
    slots: { default: "comprehensiveScore" }
  }
]);
const formRules = ref<VxeFormPropTypes.Rules>({});

const showAddModal = () => {
  showModal(`创建项目`);
  formData.value = defaultFormData();
  nextTick(() => {
    formRef.value.clearValidate();
  });
};
const showEditModal = (record: Recordable) => {
  showModal(`编辑项目->${record}`);
  nextTick(() => {
    formRef.value.clearValidate();
    getSingle(record.id).then((data: any) => {
      formData.value = data;
    });
  });
};
const detail = ref<any>();
const showViewModal = (record: Recordable) => {
  showModal(`灵工详情`, false);
  nextTick(() => {
    formRef.value.clearValidate();
    detail.value = record;
    getSingle(record.id).then((data: any) => {
      formData.value = data.data;
      // console.log(formData,detail,'detail')

    });
  });
};
// const handleSubmit = async () => {
//   const validate = await formRef.value.validate();
//   if (!validate) {
//     submitData(formData.value).then(() => {
//       modalOptions.modalValue = false;
//       emits("reload");
//     });
//   }
// };

// onBeforeMount(() => {
//   getTemplates(0).then((result: any) => {
//     templateOptions.value = result;
//   });
// });

defineExpose({ showAddModal, showEditModal, showViewModal });
</script>
<template>
  <vxe-modal
    ref="vxeModalRef"
    v-model="modalOptions.modalValue"
    width="500"
    height="750"
    showFooter
    :title="modalOptions.modalTitle"
  >
    <vxe-form
      ref="formRef"
      :data="formData"
      :items="formItems"
      :rules="formRules"
      :titleWidth="100"
      :titleColon="true"
      :titleAlign="`right`"
    >
      <template #averageUserName>
        <div  class="blod">{{ detail?.averageUserName }}</div>
      </template>
      <template #identityNumber>
        <div class="blod">{{ detail?.identityNumber }}</div>
      </template>
      <template #mobile>
        <div class="blod">{{ detail?.mobile }}</div>
      </template>
      <template #bankCardNumber>
        <div class="blod">{{ detail?.bankCardNumber }}</div>
      </template>
      <template #signedOrNotDisplay>
        <div class="blod">{{ detail?.signedOrNotDisplay }}</div>
      </template>
      <template #signingTheSourceDisplay>
        <div class="blod">{{ detail?.signingTheSourceDisplay }}</div>
      </template>
      <template #cooperateNumber>
        <div class="blod">{{ formData?.cooperateNumber }}</div>
      </template>
      <template #numberOfTasksCompleted>
        <div class="blod">{{ formData?.numberOfTasksCompleted }}</div>
      </template>
      <template #comprehensiveScore>
        <div class="blod">{{ formData?.comprehensiveScore }}</div>
      </template>
    </vxe-form>
    <template #footer>
      <vxe-button content="关闭" @click="modalOptions.modalValue = false" />
    </template>
  </vxe-modal>
</template>
<style  scoped>
.blod{
  color:#000;
  font-weight:bold
}
</style>
